<template>
  <view class="today-income-content">
    <view class="total-box" @click="clickFun" v-if="!show">
      <view class="value">
        <text v-if="startTime && endTime"
          >{{ startTime + " 00:00:00" }} 至 {{ endTime + " 23:59:59 " }}</text
        >
        <text
          >{{ subStoreFun(storeName) + " " }}{{ opFun(opName) + " "
          }}{{ orderTypeFun(orderTypeName) + " "
          }}{{ payTypeFun(payType) }}</text
        >
      </view>
      <u-icon name="arrow-right"></u-icon>
    </view>
    <view class="text-area" v-if="!show">
      <view class="u-slot-title1 flag">
        <view class="bs-left">
          <text class="bs-h">收笔款数</text><text>共计</text>
        </view>
        <view class="bs-bottom">
          <view class="bsb-left">{{ data.totalCount || "0" }}</view>
          <view class="bsb-right">
            <text class="bsb-t">收款{{ data.realTotalPrice || "0" }}</text>
            <text class="bsb-t">入账{{ data.totalPrice || "0" }}</text>
          </view>
        </view>
      </view>
      <u-cell-group>
        <u-cell v-for="(item, index) in data.items" :key="index">
          <view slot="title" class="u-slot-title1">
            <text class="u-cell-text">{{
              item.orderNumberString || item.orderNumber || "--"
            }}</text>
            <text class="tips1">{{ item.payTime || "--" }}</text>
          </view>
          <view slot="value" class="u-slot-title2">
            <text class="u-cell-text2 u-cell-text">{{
              item.payType || "--"
            }}</text>
            <text class="u-cell-text2"
              >{{ item.realPrice || "" }}(入账{{ item.price || "" }})</text
            >
          </view>
        </u-cell>
      </u-cell-group>
    </view>
    <view class="text-area" v-else>
      <view class="pop-content">
        <view class="pop-t1">目前仅支持开始时间起31天内的查询</view>
        <view class="content1">
          <view class="p-item line3" @click="showFun('1')">
            <view class="p-left">开始时间</view>
            <view class="p-right">
              <text class="v-item">{{
                startTime1 || startTime || "请选择开始时间"
              }}</text>
              <u-icon name="arrow-right"></u-icon>
            </view>
          </view>
          <view class="p-item line3" @click="showFun('2')">
            <view class="p-left">结束时间</view>
            <view class="p-right">
              <text class="v-item">{{
                endTime1 || endTime || "请选择结束时间"
              }}</text>
              <u-icon name="arrow-right"></u-icon>
            </view>
          </view>
          <view class="p-item line3" @click="showFun('3')">
            <view class="p-left">门店</view>
            <view class="p-right">
              <text class="v-item">{{ storeName || "全部" }}</text>
              <u-icon name="arrow-right"></u-icon>
            </view>
          </view>
          <view class="p-item line3" @click="showFun('4')">
            <view class="p-left">柜员</view>
            <view class="p-right">
              <text class="v-item">{{ opName || "全部" }}</text>
              <u-icon name="arrow-right"></u-icon>
            </view>
          </view>
          <view class="p-item line3" @click="showFun('5')">
            <view class="p-left">订单类型</view>
            <view class="p-right">
              <text class="v-item">{{ orderTypeName || "全部" }}</text>
              <u-icon name="arrow-right"></u-icon>
            </view>
          </view>
          <view class="p-item" @click="showFun('6')">
            <view class="p-left">支付方式</view>
            <view class="p-right">
              <text class="v-item">{{ payType || "全部" }}</text>
              <u-icon name="arrow-right"></u-icon>
            </view>
          </view>
        </view>
        <view class="sub1">
          <view class="c2" @click="getSubmit">查询</view>
        </view>
      </view>
    </view>
    <u-datetime-picker
      :show="show1"
      v-model="value1"
      :maxDate="maxDate"
      :minDate="minDate"
      @confirm="confirmTime1"
      @cancel="show1 = false"
      mode="date"
    ></u-datetime-picker>
    <u-datetime-picker
      :show="show2"
      v-model="value2"
      :maxDate="maxDate"
      :minDate="minDate"
      @confirm="confirmTime2"
      @cancel="show2 = false"
      mode="date"
    ></u-datetime-picker>
    <u-picker
      :show="show3"
      :columns="[columns1]"
      keyName="storeName"
      @cancel="show3 = false"
      @confirm="confirm3"
    ></u-picker>
    <u-picker
      :show="show4"
      :columns="[columns2]"
      keyName="jobName"
      @cancel="show4 = false"
      @confirm="confirm4"
    ></u-picker>
    <u-picker
      :show="show5"
      :columns="[columns3]"
      @cancel="show5 = false"
      @confirm="confirm5"
    ></u-picker>
    <u-picker
      :show="show6"
      :columns="[columns4]"
      @cancel="show6 = false"
      @confirm="confirm6"
    ></u-picker>
  </view>
</template>

<script>
import {
  getStoreData,
  setStoreData,
  lastDayFun,
  httpPost,
  httpGet,
} from "@/utils/http.js";
const date = new Date();
const year = date.getFullYear();
const month =
  date.getMonth() + 1 > 9 ? date.getMonth() + 1 : "0" + (date.getMonth() + 1);
const date1 = date.getDate() > 9 ? date.getDate() : "0" + date.getDate();
export default {
  data() {
    return {
      show3: false,
      show5: false,
      show6: false,
      show4: false,
      columns1: [],
      columns2: [],
      columns3: ["全部订单", "普通订单", "分账订单"],
      columns4: ["全部", "微信", "支付宝"],
      store1: "",
      endTime1: "",
      startTime1: "",
      show1: false,
      show2: false,
      minDate: new Date().getTime() - 5 * 365 * 24 * 60 * 60 * 1000,
      maxDate: new Date().getTime(),
      value1: new Date().getTime(),
      value2: new Date().getTime(),
      show: false,
      data: {},
      storeName: "",
      orderType: "",
      orderTypeName: "",
      startTime: "",
      endTime: "",
      payType: "",
      payTypeName: "",
      subStoreId: "",
      opId: "",
      opName: "",
    };
  },
  onLoad(option) {
    this.getCancel();
    this.storeFun();
    if (option && option.time && option.orderType) {
      const day = option.time;
      this.startTime = day;
      this.endTime = day;
      this.startTime1 = day;
      this.endTime1 = day;
      this.orderType = option.orderType;
      this.orderTypeName =
        this.orderType == 1
          ? "普通订单"
          : this.orderType == 2
          ? "分账订单"
          : "";
      this.getdataFun();
      this.show = false;
    } else {
      this.show = true;
    }
    // this.cashierFun()
  },
  methods: {
    confirm5(e) {
      this.show5 = false;
      if (e.indexs[0]) {
        this.orderType = e.indexs[0] || "";
        this.orderTypeName = e.value[0] || "";
      } else {
        this.orderType = "";
        this.orderTypeName = "";
      }
    },
    confirm6(e) {
      this.show6 = false;
      if (e.indexs[0]) {
        this.payType = e.value[0] || "";
      } else {
        this.payType = "";
      }
    },
    confirm4(e) {
      this.show4 = false;
      this.opId = (e && e.value && e.value[0] && e.value[0].id) || "";
      if (this.opId) {
        this.opName = e.value[0].jobName;
      } else {
        this.opName = "";
      }
    },
    confirm3(e) {
      this.subStoreId =
        (e && e.value && e.value[0] && e.value[0].storeId) || "";
      if (this.subStoreId) {
        this.storeName = e.value[0].storeName;
        this.columns2 = [];
        this.opId = "";
        this.opName = "";
        this.storeFun1();
      } else {
        this.storeName = "";
      }
      this.show3 = false;
    },
    storeFun1() {
      const _this = this;
      httpPost("/api/barcodecashier/list", {
        pageNo: 1,
        pageSize: 100,
        subStoreId: this.subStoreId,
      })
        .then((res) => {
          _this.columns2 =
            res.data &&
            res.data.list.map((i) => {
              return {
                id: i.id, //i.storeId
                jobName: i.jobName,
              };
            });
          _this.columns2.unshift({
            id: 0,
            jobName: "全部",
          });
        })
        .catch((e) => {
          _this.columns2.unshift({
            id: 0,
            jobName: "全部",
          });
        });
    },
    storeFun() {
      const _this = this;
      httpGet("/api/sellerstoreotherapply/storeList")
        .then((res) => {
          _this.columns1 = res.data
            .filter((k) => k.approveStatus > 10)
            .map((i) => {
              return {
                storeId: i.id, // i.storeId,
                storeName: i.name,
              };
            });
          _this.columns1.unshift({
            storeId: 0,
            storeName: "全部",
          });
        })
        .catch((e) => {
          _this.columns1 = [
            {
              storeId: 0,
              storeName: "全部",
            },
          ];
        });
    },
    confirmTime1(e) {
      this.value1 = e.value;
      this.show1 = false;
      this.startTime1 = lastDayFun("", "", e.value);
    },
    confirmTime2(e) {
      this.value2 = e.value;
      this.show2 = false;
      this.endTime1 = lastDayFun("", "", e.value);
    },
    closePop() {
      this.showModal = false;
    },
    showPop() {
      this.showModal = true;
    },
    getCancel() {
      this.endTime = "";
      this.startTime = "";
      this.endTime1 = "";
      this.startTime1 = "";
      this.orderType = ""; //1普通，2分账
      this.orderTypeName = "";
      this.payType = "";
      this.payTypeName = "";
      this.subStoreId = "";
      this.storeName = "";
      this.opId = "";
      this.opName = "";
    },

    showFun(v) {
      if (v === "1") {
        this.show1 = true;
      } else if (v === "2") {
        this.show2 = true;
      } else if (v === "3") {
        this.show3 = true;
      } else if (v === "4") {
        if (this.storeName) {
          this.show4 = true;
        } else {
          uni.$u.toast("请先选择门店");
        }
      } else if (v === "5") {
        this.show5 = true;
      } else if (v === "6") {
        this.show6 = true;
      }
    },
    clickFun() {
      this.show = true;
    },
    orderTypeFun(v) {
      return v || "全部订单";
    },
    opFun(id) {
      return id || "全部柜员";
    },
    subStoreFun(id) {
      return id || "全部门店";
    },
    payTypeFun(v) {
      return v || "全部支付方式";
    },
    getSubmit() {
      if (!this.startTime1 || !this.endTime1) {
        uni.$u.toast("请选择查询时间");
      } else {
        this.startTime = this.startTime1;
        this.endTime = this.endTime1;
        this.getdataFun();
      }
    },
    getdataFun() {
      const _this = this;
      const params = {
        startTime: this.startTime + " 00:00:00",
        endTime: this.endTime + " 23:59:59",
        orderType: this.orderType, //1普通，2分账
        payType: this.payType || "",
        subStoreId: this.subStoreId || "",
        opId: this.opId || "",
      };
      if (!this.orderType) {
        delete params.orderType;
      }
      if (!this.payType) {
        delete params.payType;
      }
      if (!this.subStoreId) {
        delete params.subStoreId;
      }
      if (!this.opId) {
        delete params.opId;
      }
      httpPost("/api/sellerstore/queryBillByLeading2", params)
        .then((res) => {
          _this.data = res.data;
          _this.show = false;
        })
        .catch((e) => {
          _this.data = [];
          _this.show = false;
        });
    },
  },
};
</script>

<style lang="scss">
.today-income-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f8f8f8;
  min-height: 100vh;
  width: 100vw;
  box-sizing: border-box;
  padding-bottom: 16px;
  .pop-content {
    padding: 0;
    min-width: 80vw;
    .pop-t1 {
      background: #f8f8f8;
      height: 30px;
      padding: 12px 16px;
      line-height: 30px;
      font-size: 12px;
    }
    .line3 {
      border-bottom: 1px solid #eee;
    }
    .content1 {
      background: #fff;
      .p-item {
        height: 48px;
        line-height: 48px;
        font-size: 14px;
        display: flex;
        padding: 0 16px;
        justify-content: space-between;
        font-size: #333;
        .v-item {
          margin-right: 6px;
        }
        .p-right {
          font-size: #666;
          display: flex;
        }
      }
    }
    .sub1 {
      border-top: 1px solid #eee;
      height: 48px;
      line-height: 48px;
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      .c2 {
        color: #f00;
        font-size: 15px;
        text-align: center;
        line-height: 48px;
        width: 100vw;
      }
    }
  }
  .total-box {
    margin: 16px 0;
    padding: 12px 16px;
    width: 100vw;
    box-sizing: border-box;
    background: #fff;
    display: flex;
    align-items: center;
    .value {
      font-size: 13px;
      flex: 1;
      margin-right: 6px;
    }
  }
  .u-cell-text2 {
    text-align: right;
  }
  .u-cell-text {
    margin-bottom: 3px;
  }
  .text-area {
    width: 100vw;
    color: #333;
    font-size: 14px;
    background: #fff;
    .bs-bottom {
      display: flex;
      justify-content: space-between;
      padding: 0 16px 8px 16px;
      align-items: center;
    }
    .bsb-left {
      font-size: 24px;
      font-weight: bold;
      color: #333;
    }
    .bsb-right {
      display: flex;
      font-weight: bold;
      font-size: 15px;
      flex-direction: column;
    }
    .bs-left {
      color: #666;
      display: flex;
      justify-content: space-between;
      padding: 8px 16px;
      .bs-h {
        font-size: 15px;
      }
    }
    .tips2 {
      color: #f00;
      text-align: right;
    }
    .title {
      line-height: 30px;
      color: #666;
      margin-left: 16px;
    }
  }
  .u-slot-title1 {
    display: flex;
    flex-direction: column;
    .flag {
      padding: 16px 8px;
      justify-content: space-between;
    }
  }
  .u-slot-title2 {
    display: flex;
    flex-direction: column;
  }
  .total {
    width: 120px;
    height: 120px;
    display: flex;
    margin-top: 32px;
    font-size: 14px;
    color: #fff;
    justify-content: center;
    align-content: center;
    background: linear-gradient(-90deg, #f90, #f60);
    box-shadow: 2px 2px 22px 1px rgba(247, 213, 62, 0.897);
    border-radius: 50%;
    .num {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .value {
        font-size: 16px;
        line-height: 30px;
      }
    }
  }
}
</style>
